<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { newListenWorldApi, submitListenApi } from '/api/request.js';
let platform = uni.getStorageSync('platform');
const props = defineProps({});
const list = ref([]);
// 1美 2英
const type = ref(2);
const id = ref('');
onLoad(async (e) => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    id.value = e.id;
    let res = await newListenWorldApi({
        record_id: id.value
    });
    list.value = res.data;
    console.log(list.value);
    play();
});
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const play = () => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    uni.$emit('playAudio', http + `${list.value[selectIndex.value].detail.audio_file_name.word}`);
};

const goback = () => {
    uni.navigateBack();
};
const center = ref(null);
const showModel = (index) => {
    if (index == 0) center.value.open('center');
};
const selectIndex = ref(0);
const checkIndex = ref(null);
const allRight = ref([]);
const allError = ref([]);
const selectFanyi = computed(() => {
    if (!list.value.length) return [];
    let arr = [];
    arr.push(list.value[selectIndex.value].detail.youdao_api);
    arr = arr.concat(list.value[selectIndex.value].detail.error);
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
});
const times = ref(null);
const clickItem = (check, indexss) => {
    if (times.value) {
        return;
    }
    checkIndex.value = indexss;
    const id = list.value[selectIndex.value].id;
    if (list.value[selectIndex.value].detail.youdao_api == check) {
        // 播放对的音频
        allRight.value.push(id);
        if (selectIndex.value == list.value.length - 1) {
            center.value.open('center');
        } else {
            times.value = setTimeout(() => {
                checkIndex.value = null;
                selectIndex.value++;
                play();
                clearTimeout(times.value);
                times.value = null;
            }, 600);
        }
        return;
    }
    const index = allError.value.findIndex((item) => item == id);
    if (index == -1) {
        allError.value.push(id);
    }
};
const getClass = (check, index) => {
    if (checkIndex.value == index) {
        if (list.value[selectIndex.value].detail.youdao_api == check) {
            return 'active';
        } else {
            return 'default';
        }
    }
};
const que = async () => {
    center.value.close();
    let arr = allRight.value.filter((item) => {
        return !allError.value.includes(item);
    });
    let res = await submitListenApi({
        learning_id: id.value,
        correct_word_id: arr.join(','),
        error_word_id: allError.value.join(',')
    });
    if (res.code == 1) {
        uni.redirectTo({
            url: '/pages/common/chuangguan?id=' + id.value + '&type=1'
        });
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1000
        });
    }
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 听音辨词 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                mode="widthFix"
            />
        </view>
        <scroll-view
            scroll-y="true"
            :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }"
        >
            <view class="body uni-col">
                <view class="zhuangtat uni-col">
                    <view class="title"> 第一关 </view>
                    <image @click="play" src="/static/img/user/world/laba.png" class="laba"></image>
                </view>
                <view class="list" v-if="list && list.length">
                    <view
                        @click="clickItem(item, index)"
                        class="item uni-row"
                        v-for="(item, index) in selectFanyi"
                        :key="index"
                        :class="getClass(item, index)"
                    >
                        {{ item }}
                    </view>
                </view>
                <view class="footer uni-row">
                    <view class="item active uni-row">
                        <image src="/static/img/user/world/dui.png" class="dui"></image>
                        <text>{{ allRight.length }}</text>
                    </view>
                    <view class="item default uni-row">
                        <image src="/static/img/user/world/cuo.png" class="cuo"></image>
                        <text>{{ allError.length }}</text>
                    </view>
                </view>
                <view class="index"> {{ selectIndex + 1 }}/{{ list.length }} </view>
            </view>
        </scroll-view>
    </view>
    <uni-popup ref="center" :mask-click="false">
        <view class="wai">
            <view class="title"> 温馨提示 </view>
            <view class="label"> 总单词：{{ list.length }} </view>
            <view class="label"> 正确次数：{{ allRight.length }} </view>
            <view class="label"> 错误次数：{{ allError.length }} </view>
            <view class="footer uni-row">
                <view class="shi bt" @click="que"> 确定 </view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 96rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 10rpx 0;
        text-align: center;
    }

    .footer {
        justify-content: center;

        .bt {
            width: 300rpx;
            height: 68rpx;
            font-size: 24rpx;
            line-height: 68rpx;
            border-radius: 36rpx;
        }

        .shi {
            margin-top: 20rpx;
            background: #9561f3;
            color: #fff;
        }
    }
}

.wrap {
    .index {
        text-align: center;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #333333;
    }

    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        justify-content: space-between;
        height: 100%;
        padding: 54rpx 0 80rpx;

        .zhuangtat {
            justify-content: center;
            align-items: center;

            .title {
                font-size: 36rpx;
                color: #333333;
            }

            .laba {
                margin-top: 30rpx;
                width: 80rpx;
                height: 80rpx;
            }
        }

        .list {
            .item {
                justify-content: center;
                width: 574rpx;
                height: 98rpx;
                background: #fff;
                border-radius: 16rpx;
                margin: 0 auto 40rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                &.active {
                    background-color: #5bd145;
                    color: #fff;
                }

                &.default {
                    background-color: #ef4828;
                    color: #fff;
                }
            }
        }

        .footer {
            justify-content: space-around;

            .item {
                justify-content: space-around;
                width: 184rpx;
                height: 124rpx;
                border-radius: 16rpx;

                &.active {
                    background: #78e764;
                    border: 2rpx solid #5bd145;
                }

                &.default {
                    background: #ff7373;
                    border: 2rpx solid #ff4242;
                }

                .dui,
                .cuo {
                    width: 48rpx;
                    height: 48rpx;
                }

                text {
                    font-size: 28rpx;
                    color: #fff;
                }
            }
        }
    }
}
</style>
